/**
 * @file
 * @auth jinguangguo
 * @date 2016/12/7
 */
@import "./deposit/style";
@import "./withdraw/style";

.module-account-assets {
    line-height: 1;
    margin-top: -8px;
    .assets-active{
        //background-color: #e9e9e9;
        //background: linear-gradient(to right, #fff, #e9e9e9);

        border-bottom: 1px solid #000;
        transform: translateY(-4px);
        transition: transform .3s;
        color:#000;
        padding-bottom: 2px;

        &:after{
            content: ' ';
            display: block;
            width: 0;
            height: 0;

            border-width:4px 4px 0;
            border-style:solid;
            border-color: #000 transparent transparent;
            position:absolute;
            top:18px;
            left:50%;
            transform: translateX(-50%);
        }
    }

    //.asset-tab {
    //    display: flex;
    //    justify-content: space-between;
    //    align-items: center;
    //    box-sizing: border-box;
    //    height: 48px;
    //    font-size: 13px;
    //    border-bottom: 1px solid $color-item-hover;
    //    &-left {
    //        display: flex;
    //        height: 100%;
    //        .tab-item {
    //            display: flex;
    //            align-items: center;
    //            margin-right: 20px;
    //            border-bottom: 1px solid transparent;
    //            color: #a1a1a1;
    //            cursor: pointer;
    //            &.active {
    //                border-bottom: 1px solid #000;
    //                color: #000;
    //            }
    //            &:hover {
    //                color: #000;
    //                transition: all 0.4s ease;
    //            }
    //        }
    //        .tab-fork {
    //            position: relative;
    //            .hot {
    //                position: absolute;
    //                top: 13px;
    //                right: -40px;
    //                color: #fff;
    //                font-weight: bold;
    //                padding: 4px 8px;
    //                background-color: #1e97fc;
    //                transform: skew(-30deg,0) rotateX(10deg) scale(0.8);
    //            }
    //        }
    //    }
    //    &-right {
    //        cursor: default;
    //        font-size: 12px;
    //        .right-item {
    //            display: inline-block;
    //            vertical-align: middle;
    //            &-asset {
    //                margin-right: 4px;
    //                color: $color-font-gray;
    //                .asset-no {
    //
    //                }
    //            }
    //        }
    //    }
    //}
    .asset-head{
        display: flex;
        align-items: center;
        height: 48px;
        &-item{
            flex:1;
            white-space:nowrap;
            text-align: right;
            color: #a1a1a1;

            &:first-child{
                margin-left: 24px;
                text-align: left;
                transform: translate(50px,0);

            }
            &:last-child{
                flex: 2;
            }
            .input{
                height: auto;
                line-height: inherit;
                margin-left: 8px;
            }
        }
        .item-search{
            position: relative;
            .input {
                width: 132px;
                height: 28px;
                border-radius: 24px;
                padding: 0 12px;
                margin-right: 32px;
                box-shadow: 0 0 16px 0 #eaeaea;
            }
            .icon-search {
                position: absolute;
                right: 40px;
                top: 6px;
                color: #cccdcd;
                font-size: 16px;
            }
        }
    }
    .asset-content{
        .link{
            margin-right: 32px;
            color:#cccccc;
            cursor: default;

            &-enable{
                color:#181818;
                cursor: pointer;

                .icon-deposit{
                    color:#17a21d;
                    opacity: 0.4;
                }

                .icon-withdraw{
                    color:#ff4622;
                    opacity: 0.4;
                }

                &:hover{
                    color:#555555;

                    .icon-deposit{
                        opacity: 1;
                    }

                    .icon-withdraw{
                        opacity: 1;
                    }
                }
            }

            &-no-transition{
                transition: none;
            }
        }
        .title{
            font-weight: normal;
        }

        .assets-text{
            display: inline-block;
        }

        .assets-box{
            .popover-body {
                width: auto;
            }
            .list{
                display: flex;
                padding: 2px 0;
                .item{
                    flex:1;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    color: #a1a1a1;
                    &:nth-child(1){
                        margin-left:24px;
                        display: flex;
                        justify-content: flex-start;

                        .icon{
                            width: 28px;
                            height: 28px;
                            background-image: url('../../../img/bch@2x.png');
                            background-position: center;
                            background-repeat: no-repeat;
                            background-size: contain;
                            @each $coin in btc, eth, ltc, act, smc, let, omg, eos, btm, tv, usc,
                                    bcd,bch,bchc,bta,btd,btg,lbtc,sbtc,abtc,bck,btp,yoyow,trx,ipt,cbtc,bcx,ssc,emo,etf,etg,bth,sltc,lts,aac,kcash,btf,lch ,usdt,smcf1,vca,hmc,
                                    gto, wtc, storj, salt, topc, appc {
                                &.coin-#{$coin} {
                                    background-image: url('../../../img/#{$coin}@2x.png');
                                    background-position: center;
                                    background-repeat: no-repeat;
                                    background-size: contain;
                                }
                            }
                        }
                    }

                    &:last-child{
                        flex: 2;
                        .ui-btn {
                            height: 30px;
                            line-height: 30px;
                        }
                    }

                    .strong{
                        color: #000;
                    }
                    .em{
                        color: $color-font-gray;
                    }

                    .assets-text{
                        color: #cccdcd;
                        text-align: right;
                    }
                    .unit{
                        padding-left: 24px;
                        font-style: normal;
                        color: #000;
                    }
                }
                &:hover{
                    background-color: #f8f8f8;
                    transition: all 0.4s ease;
                }
            }
        }
    }

    .asset-total{
        color: $color-font-gray;
        margin: 30px 0 24px 0;
        &-item{
            position: relative;
            color: #000;
            font-weight: bold;
            .icon{
                position: absolute;
                right: 8px;
                top:4px;
                color: #cccdcd;
            }
        }
        &-tip{
            margin-left: 4px;
        }
    }
}

